Ext.ns('App.login');

App.login = {
    createLoginWindow:function() {
        App.loginWindow = new LoginWindow({
            url:ctxPath + appPath + '/login',
            callback:function(result) {
                if(result.success) {
                    App.loginWindow.close();
                    window.location.href=ctxPath+'/index.jsp'
                } else {
                    Ext.Msg.alert('Error', result.msg);
                }
            }
        });
        App.loginWindow.show();
    },
    logout: function() {
        Ext.Ajax.request({
            url:ctxPath+appPath+'/j_logout',
            success:function() {
                window.location.href=ctxPath+'/login.jsp';
            }
        });
    }
}

var LoginWindow = Ext.extend(Ext.Window, {
    title:'User Login',
    width:350,
    height:220,
    closable:false,
    resizable:false,
    iconCls:'login-icon',
    buttonAlign:'center',
    createFormPanel:function(){
        return new Ext.form.FormPanel({
            bodyStyle:'padding-top:6px',
            defaultType:'textfield',
            labelAlign:'right',
            labelWidth:55,
            labelPad:0,
            layout:'form',
            frame:true,
            defaults:{
                allowBlank:false,
                anchor:'96%,96%',
                selectOnFocus:true
            },
            items:[{
                name:'username',
                fieldLabel:'Username',
                blankText:'Username can not be empty'
            },{
                name:'password',
                fieldLabel:'Password',
                blankText:'Password can not be empty',
                inputType:'password'
            },{
                name:'checkCode',
                field:'Capcha',
                blankText:'Capcha can not be empty'
            },{
                xtype:'container',
                layout:'table',
                defaultType:'textfield',
                hideLabel:false,
                layoutConfig:{
                    columns:3
                },
                items:[{
                    width:55,
                    xtype:'label',
                    text:'　　　　'
                },{
                    width:150,
                    id:'loginCode',
                    xtype:'panel',
                    html:'<img border="0" height="30" width="150" src="' + ctxPath+appPath+'/catchaimg"/>'
                },{
                    width:55,
                    xtype:'panel',
                    bodyStyle:'font-size:12px;padding-left:12px',
                    html:'<a href="javascript:refreshCode();">Refresh</a>'
                }]
            },{
                xtype:'checkbox',
                name:'_remember',
                boxLabel:'Remember me'
            }]
        });
    },
    login:function() {
        if(this.formPanel.form.isValid()) {
            this.formPanel.form.submit({
                waitTitle:'Please wait',
                waitMsg:'Login...',
                url:this.url,
                success:function(form, action) {
                    this.hide();
                    if(this.callback) {
                        this.callback.call(this, action.result);
                    }
                },
                failure:function(form, action) {
                    if(this.callback) {
                        this.callback.call(this, action.result);
                        form.findField('password').setRawValue('');
                        form.findField('username').focus(true);
                    }
                },
                scope:this
            });
        }
    },

    initComponent:function() {
        this.keys={
            key:Ext.EventObject.ENTER,
            fn:this.login,
            scope:this
        };
        LoginWindow.superclass.initComponent.call(this);
        this.formPanel = this.createFormPanel();
        this.add(this.formPanel);
        this.addButton({
            text:'Login',
            iconCls:'btn-login'
        }, this.login, this);
        this.addButton({
            text:'Reset',
            iconCls:'btn-login-reset'
        }, function(){
            this.formPanel.getForm().reset();
        }, this);
    }
});

function refreshCode() {
    var loginCode = Ext.getCmp('loginCode');
    loginCode.body.update('<img border="0" height="30" width="150" src=' + ctxPath + appPath + '/catchaimg?r='+Math.random() + '"/>');
};